<template>
  <el-row type="flex" justify="space-between" style="width: 100%">
    <el-col :span="20">{{ nodeData.name }}</el-col>
    <el-col :span="4">
      <el-row type="flex" justify="end">
        <el-col>{{ nodeData.manager }}</el-col>
        <el-col>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link" style="font-size:16px" @click.stop>
              操作
              <i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <el-dropdown-item v-if="isRoot" command="edit">
                查看部门
              </el-dropdown-item>
              <el-dropdown-item v-if="isRoot" command="del">
                删除部门
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { reqDelDEpartment } from '@/api/departments'
export default {
  name: 'Treetools',
  props: {
    nodeData: {
      type: Object,
      required: true
    },
    isRoot: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    async handleCommand(command) {
      // command 是下拉项的command的标识位 字符串
      // 新增部门
      if (command === 'add') {
        // 通知父组件将控制新增部门的布尔值设置为true, 携带当前点击的这一行的数据
        // console.log(this.nodeData)
        this.$emit('addDepts', this.nodeData)
      }
      // 编辑
      if (command === 'edit') {
        this.$emit('editDepts', this.nodeData)
      }
      // 删除
      if (command === 'del') {
        // 确认消息提示
        const str = await this.$confirm(
          '此操作将永久删除该部门, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(() => {
          this.$message.info('取消退出操作')
        })
        // str是confirm是点击了确认
        if (str === 'confirm') {
          console.log(1)
          // 发送请求
          const { message } = await reqDelDEpartment(this.nodeData.id)
          // 提示用户
          console.log(message)
          this.$message.info(message)
          // 通知父组件 重新渲染部门列表
          this.$emit('reload')
        }
      }
    }
  }
}
</script>

<style></style>
